<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <style>
        /* 在这里添加CSS样式 */
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        #addStudentBtn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        #addStudentBtn:hover {
            background-color: #45a049;
        }
        /* ... 其他样式 ... */

        .float-window {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: none; /* 默认不显示，通过JS控制 */
        }

        .float-window.active {
            display: block; /* 当激活时显示浮窗 */
        }

        /* 遮罩层样式，用于覆盖页面其他内容 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 500;
            display: none; /* 默认不显示，通过JS控制 */
        }

        .overlay.active {
            display: block; /* 当激活时显示遮罩层 */
        }
        /* 浮窗样式 */
        .float-window {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            z-index: 1001;
        }

        /* 输入框样式 */
        input[type="text"],
        input[type="number"],
        select,
        textarea {
            display: block;
            margin-bottom: 10px;
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 按钮样式 */
        button {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 错误消息样式 */
        .error-message {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h1>学生信息管理系统</h1>
<!-- 添加浮窗 -->
<div class="float-window" id="addStudentWindow">
    <h2>添加学生信息</h2>
    <form id="addStudentForm">
        <input type="text" id="studentName" placeholder="请输入学生姓名" required>
        <input type="number" id="studentAge" placeholder="请输入学生年龄" required>
        <select id="studentGender">
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="其他">其他</option>
        </select>
        <input type="email" id="studentEmail" placeholder="请输入学生邮箱" required>
        <input type="tel" id="studentPhone" placeholder="请输入学生电话">
        <textarea id="studentAddress" placeholder="请输入学生地址"></textarea>
        <button type="submit">提交</button>
    </form>
    <button id="closeStudentFormBtn">取消</button>
</div>
<div class="overlay" id="overlay"></div>
<!-- 修改浮窗 -->
<div id="editStudentWindow" class="float-window">
    <h2>编辑学生信息</h2>
    <form id="editStudentForm">
        <input type="text" id="StudentId"  required hidden="hidden">
        <input type="text" id="editStudentName" placeholder="请输入学生姓名" required>
        <input type="number" id="editStudentAge" placeholder="请输入学生年龄" required>
        <select id="editStudentGender" required>
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="其他">其他</option>
        </select>
        <input type="email" id="editStudentEmail" placeholder="请输入学生邮箱" required>
        <input type="tel" id="editStudentPhone" placeholder="请输入学生电话">
        <textarea id="editStudentAddress" placeholder="请输入学生地址"></textarea>
        <button type="submit">更新</button>
        <p id="errorMessage" class="error-message"></p>
    </form>
    <button id="cancelEditStudentBtn">取消</button>
</div>
<table id="studentTable">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 使用JavaScript填充学生数据 -->
    </tbody>
</table>
<button id="addStudentBtn">添加学生</button>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有学生信息并填充到表格中
        fetch('/api/students')
            .then(response => response.json())
            .then(students => {
                const tableBody = document.querySelector('#studentTable tbody');
                tableBody.innerHTML = students.map(student => `
                <tr>
                    <td>${student.id}</td>
                    <td>${student.name}</td>
                    <td>${student.age}</td>
                    <td>${student.gender}</td>
                    <td>${student.email}</td>
                    <td>${student.phone}</td>
                    <td>${student.address}</td>
                    <td>
                       <button data-id="${student.id}" class="editStudentBtn">编辑</button>
                       <button data-id="${student.id}" class="deleteStudentBtn">删除</button>
                    </td>
                </tr>
            `).join('');
            });

        document.querySelector('#addStudentBtn').addEventListener('click', function() {
            // 显示遮罩层
            document.getElementById('overlay').classList.add('active');
            // 显示浮窗
            document.getElementById('addStudentWindow').classList.add('active');
        });

        // 关闭浮窗时，先隐藏浮窗，然后隐藏遮罩层
        document.getElementById('addStudentWindow').addEventListener('click', function(event) {
            if (event.target === this) {
                document.getElementById('addStudentWindow').classList.remove('active');
                document.getElementById('overlay').classList.remove('active');
            }
        });


        // 浮窗表单提交事件
        document.getElementById('addStudentForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            const name = document.getElementById('studentName').value;
            const age = document.getElementById('studentAge').value;
            const gender = document.getElementById('studentGender').value;
            const email = document.getElementById('studentEmail').value;
            const phone = document.getElementById('studentPhone').value;
            const address = document.getElementById('studentAddress').value;

            // 发送POST请求以添加学生
            fetch('/api/students', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    age: parseInt(age),
                    gender: gender,
                    email: email,
                    phone: phone,
                    address: address
                })
            }).then(response => {
                if (response.ok) {
                    alert('学生添加成功！');
                    // 刷新学生列表
                    location.reload();
                    // 关闭浮窗
                    document.getElementById('addStudentWindow').classList.remove('active');
                    document.getElementById('overlay').classList.remove('active');
                } else {
                    alert('学生添加失败！');
                }
            });
        });

        // 浮窗取消按钮事件
        document.getElementById('closeStudentFormBtn').addEventListener('click', function() {
            document.getElementById('addStudentWindow').classList.remove('active');
            document.getElementById('overlay').classList.remove('active');
        });


        // 浮窗编辑学生信息事件
        document.querySelector('#studentTable').addEventListener('click', function(event) {
            if (event.target.classList.contains('editStudentBtn')) {
                const studentId = event.target.dataset.id;


                // 显示遮罩层
                document.getElementById('overlay').classList.add('active');
                // 显示浮窗
                document.getElementById('editStudentWindow').classList.add('active');

                // 发送GET请求以获取学生信息
                fetch('/api/students/' + studentId)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(student => {
                        document.getElementById('StudentId').value = studentId;
                        document.getElementById('editStudentName').value = student.name;
                        document.getElementById('editStudentAge').value = student.age;
                        document.getElementById('editStudentGender').value = student.gender;
                        document.getElementById('editStudentEmail').value = student.email;
                        document.getElementById('editStudentPhone').value = student.phone;
                        document.getElementById('editStudentAddress').value = student.address;
                    })
                    .catch(error => {
                        console.error('Failed to fetch student data:', error);
                        document.getElementById('errorMessage').textContent = '加载学生信息时发生错误';
                    });
            }
        });


        // 浮窗关闭按钮事件
        document.getElementById('cancelEditStudentBtn').addEventListener('click', function() {
            document.getElementById('editStudentWindow').classList.remove('active');
            document.getElementById('overlay').classList.remove('active');
        });

        document.getElementById('editStudentForm').addEventListener('click', function(event) {
            if (event.target === this) {
                document.getElementById('addStudentWindow').classList.remove('active');
                document.getElementById('overlay').classList.remove('active');
            }
        });
        // 浮窗表单提交事件
        document.getElementById('editStudentForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            const studentId = document.getElementById('StudentId').value;
            const name = document.getElementById('editStudentName').value;
            const age = document.getElementById('editStudentAge').value;
            const gender = document.getElementById('editStudentGender').value;
            const email = document.getElementById('editStudentEmail').value;
            const phone = document.getElementById('editStudentPhone').value;
            const address = document.getElementById('editStudentAddress').value;

            // 发送PUT请求以更新学生信息
            fetch('/api/students/' + studentId, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    age: parseInt(age),
                    gender: gender,
                    email: email,
                    phone: phone,
                    address: address
                })
            }).then(response => {
                if (response.ok) {
                    alert('学生信息更新成功！');
                    // 关闭浮窗
                    document.getElementById('editStudentWindow').classList.remove('active');
                    document.getElementById('overlay').classList.remove('active');
                    // 刷新学生列表
                    location.reload();
                } else {
                    alert('学生信息更新失败！');
                }
            }).catch(error => {
                console.error('更新学生信息时发生错误:', error);
                alert('学生信息更新失败！');
            });
        });
        // 为删除学生按钮添加点击事件
        document.querySelector('#studentTable').addEventListener('click', function(event) {
            if (event.target.classList.contains('deleteStudentBtn')) {
                const studentId = event.target.dataset.id;

                // 发送DELETE请求以删除学生信息
                fetch('/api/students/' + studentId, {
                    method: 'DELETE'
                }).then(response => {
                    if (response.ok) {
                        alert('学生删除成功！');
                        // 刷新学生列表
                        location.reload();
                    } else {
                        alert('学生删除失败！');
                    }
                });
            }
        });



    });

</script>
</body>
</html>
